<template>
  <div style="height: 100%; width: 100%">
    <OptionTitle
      :title="translate('sportKnow')"
      :sub-title="`${translate('maxAdd')}${6}${translate('gydzs')}`"
    />
    <el-form label-width="auto" class="mt20">
      <el-form-item :label="translate('showMethods')" class="mb5">
        <el-radio
          v-for="item in styleList"
          :key="item.key"
          v-model="content.style"
          :label="item.key"
          @change="dragSuccess"
        >{{ item.value }}</el-radio>
      </el-form-item>
      <el-form-item :label="translate('showContent')" class="mb5">
        <el-checkbox-group v-model="showContent" @change="dragSuccess">
          <el-checkbox
            v-for="item in paramList"
            :key="item.key"
            :label="item.key"
          >{{ item.value }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item :label="translate('showRules')" class="mb5">
        <el-radio
          v-for="item in ruleList"
          :key="item.key"
          v-model="venueContent.rule"
          :label="item.key"
          @change="ruleChange"
        >{{ item.value }}</el-radio>
      </el-form-item>
    </el-form>
    <div v-if="venueContent.rule === '2'" class="side">
      <el-button icon="el-icon-plus" @click="openDrawer">{{
        translate("tjydzs")
      }}</el-button>
      <Draggable
        v-model="venueContent.customList"
        class="list"
        @end="dragSuccess"
      >
        <div
          v-for="(item, index) in venueContent.customList"
          :key="item.id"
          class="item"
        >
          <img class="img" :src="item.icon" alt="">
          <div class="title">{{ item.title }}</div>
          <img class="drag" src="@/assets/icon/drag.png" alt="">
          <div class="del_wrap" @click="customItemDel(index)">
            <i color="#FDEBE8" class="el-icon-delete" />
          </div>
        </div>
      </Draggable>
    </div>

    <el-drawer
      :title="translate('tjydzs')"
      :visible.sync="isShowDrawer"
      size="50%"
    >
      <div>
        <span>{{ translate("ydzsmc") }}：</span>
        <el-input
          v-model="searchSlideTitle"
          class="w200 mr20"
          :placeholder="translate('ydzsmcPlace')"
        />
        <el-button type="primary" @click="queryDrawerList">{{
          translate("cz")
        }}</el-button>
        <el-button @click="clearDrawer">{{ translate("clear") }}</el-button>
      </div>
      <el-table
        ref="table"
        v-loading="listLoading"
        :data="tableList"
        element-loading-text="Loading"
        border
        fit
        :header-row-class-name="'table-header'"
        class="doumee-element-table mt20"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" align="center" width="55" />
        <el-table-column
          align="center"
          :label="translate('ydzsmc')"
          prop="title"
          min-width="100"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          :label="translate('listPic')"
          prop=""
          min-width="80"
          show-overflow-tooltip
        >
          <template v-slot="scope">
            <img style="width: 40px" :src="scope.row.img2" alt="">
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          :label="translate('applyVenue')"
          prop=""
          min-width="140"
          show-overflow-tooltip
        >
          <span>{{ config.venueName }}</span>
        </el-table-column>
        <el-table-column
          align="center"
          :label="translate('createTime')"
          prop="createDate"
          min-width="100"
          show-overflow-tooltip
        />
      </el-table>
      <Paginations
        :total="tableListTotal"
        :page="pagination.page"
        @current-change="currentChange"
        @SizeChange="handleSizeChange"
      />
      <div class="drawer_bottom">
        <div class="separate" />
        <el-button
          v-preventReClick
          type="primary"
          class="ml20"
          @click="customSub"
        >{{ translate("tj") }}</el-button>
        <el-button @click="isShowDrawer = false">{{
          translate("cancel")
        }}</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import Draggable from 'vuedraggable'
import OptionTitle from '../../../components/optionTitle.vue'
import { getSportList } from '@/api'
export default {
  components: {
    OptionTitle,
    Draggable
  },
  props: {
    config: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      paramList: [],
      ruleList: [],
      styleList: [],
      content: {},
      venueContent: {},

      showContent: [], // 显示内容 暂存

      isShowDrawer: false,
      searchSlideTitle: '',
      courseType: '',
      tableList: [],
      tableListTotal: 0,
      selTableList: [],
      pagination: {
        page: 1,
        rows: 10
      },
      listLoading: false,

      contentTemp: {},
      venueContentTemp: {},
      showContentTemp: []
    }
  },
  created() {
    this.paramList = [...this.config.paramList]
    this.ruleList = [...this.config.ruleList]
    this.styleList = [...this.config.styleList]
    this.content = { ...this.config.content }
    this.venueContent = { ...this.config.venueContent }
    if (this.content.param) {
      this.showContent = this.content.param.split(',')
    }

    this.contentTemp = JSON.parse(JSON.stringify(this.config.content))
    this.venueContentTemp = JSON.parse(JSON.stringify(this.config.venueContent))
    if (this.content.param) {
      this.showContentTemp = JSON.parse(JSON.stringify(this.content.param.split(',')))
    }
  },
  methods: {
    dragSuccess() {
      const { content, contentTemp, showContent, showContentTemp, venueContent, venueContentTemp } = this
      this.content.param = this.showContent.join(',')
      const obj = {
        venueContent: {
          customList: this.venueContent.customList
        },
        name: this.config.name,
        content: this.content
      }
      let count = 0
      if (showContent.join(',') !== showContentTemp.join(',')) {
        count++
      }
      if (content.style !== contentTemp.style) {
        count++
      }
      if (venueContent.rule !== venueContentTemp.rule) {
        count++
      }
      if (venueContent.customList && venueContentTemp.customList && venueContent.customList.map(i => i.id).join(',') !== venueContentTemp.customList.map(i => i.id).join(',')) {
        count++
      }
      this.$store.dispatch('app/changeMiniFlag', {
        code: 'sportFlag',
        flag: count > 0
      })
      this.$bus.$emit('miniSportChange', this.venueContent.rule, obj)
    },
    handleSelectionChange(val) {
      this.selTableList = val
    },
    ruleChange(val) {
      // if (val === '1') {
      //   this.venueContent.customList = null
      // }
      this.dragSuccess()
    },
    indexSub() {
      const fn = () => {
        if (this.venueContent.rule === '1') {
          this.venueContent.customList = null
        }
      }
      fn()
    },
    openDrawer() {
      this.searchSlideTitle = ''
      this.isShowDrawer = true
      this.getSports()
      this.$nextTick(() => {
        this.$refs.table.clearSelection()
      })
    },
    customSub() {
      const temp = [...this.venueContent.customList || []]
      const customList = this.selTableList.map(item => {
        item.icon = item.img2
        // item.title = item.courseName || ''
        return item
      })
      customList.forEach(item => {
        if (temp.findIndex(i => i.id === item.id) > -1) {
          return
        } else {
          temp.push(item)
        }
      })
      if (temp.length > this.config.maxNum) {
        return this.$message.warning(`${this.translate('maxAdd')}${this.config.maxNum}${this.translate('gydzs')}`)
      }
      this.venueContent.customList = temp
      this.dragSuccess()
      this.isShowDrawer = false
    },
    customItemDel(index) {
      const temp = [...this.venueContent.customList]
      temp.splice(index, 1)
      this.venueContent.customList = temp
      this.dragSuccess()
    },
    closeDrawer() { },
    getSports() {
      this.listLoading = true
      getSportList({
        param: {
          // isRec: '1',
          venueId: this.config.venueId,
          name: this.searchSlideTitle
        },
        pagination: this.pagination
      }).then(res => {
        this.listLoading = false
        this.tableList = res.recordList
        this.tableListTotal = res.totalCount
      }, () => {
        this.listLoading = false
      })
    },
    clearDrawer() {
      this.searchSlideTitle = ''
      this.courseType = ''
      this.pagination.page = 1
      this.getSports()
    },
    queryDrawerList() {
      this.pagination.page = 1
      this.getSports()
    },
    currentChange(val) {
      this.pagination.page = val
      this.getSports()
    },
    handleSizeChange(val) {
      this.pagination.rows = val
      this.getSports()
    }
  }
}
</script>

<style lang="scss" scoped>
.side {
  height: calc(100% - 200px);
  overflow: auto;
  .list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
    .item {
      margin-right: 20px;
      margin-bottom: 20px;
      width: 184px;
      position: relative;
      border: 1px solid #dfe2e8;
      padding: 10px;
      cursor: pointer;
      .img {
        width: 164px;
        height: 96px;
      }
      .title {
        width: 100%;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
      }
      &:hover {
        .del_wrap {
          display: block;
        }
      }
      .del_wrap {
        display: none;
        position: absolute;
        right: 0;
        top: 0;
        width: 20px;
        height: 20px;
        line-height: 20px;
        border-radius: 0 0 0 4px;
        text-align: center;
        background-color: #fdebe8;
        color: #ee3821;
        font-size: 12px;
        cursor: pointer;
      }
      .drag {
        position: absolute;
        left: 0;
        top: 0;
      }
    }
  }
}
.drawer_wrap {
  height: calc(100% - 60px);
  overflow: auto;
}
.drawer_bottom {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0px;
  padding-bottom: 20px;
  background-color: #fff;
  z-index: 1000;
  .separate {
    width: 100%;
    height: 1px;
    margin: 20px 0px;
    background-color: #dfe2e8;
  }
}
</style>
